<template>
	<view class="page">
		<view class="box-title">
			<uni-nav-bar shadow  title="云主机自选配置" />
		</view>
		
		<view class="top-nav">
			<scroll-view scroll-x="true" class="scroll-x">
				<view class="in" :class="topNavIndex==index ? 'in-active':''"
						@click="cl(index)"
						v-for="(item,index) in pageData.topNavList" :key="index">{{item}}</view>
			</scroll-view>
		</view>
		
		<view class="filter">
			
		</view>
		<view class="item-list">
			
		</view>
		<view class="footer">
			
		</view>
		
	</view>
</template>

<script>
	export default {
		
		data() {
			return {
				topNavIndex:0,
				testdata:null,
				pageData:{
					topNavList:[,'GPU','磁盘','网卡','O  S','内存'],	
					tpNavList:[{
							id:1,
							menuName:'CPU',
							orderNum:1
						},]
						
					
					
				}
			};
		},
		onLoad() {
					uni.request({
						url: 'http://localhost:8080/cloudhost/componentslist',
						method: 'GET',
						data: {},
						success: res => {
							this.testdata=handleTree(res.data);
						},
						fail: () => {},
						complete: () => {}
					});
				},
		methods:{
			cl(index){
				this.topNavIndex=index
				
			},
			
			handleTree(data, id, parentId, children) {
				
			  let config = {
			    id: id || 'id',
			    parentId: parentId || 'parentId',
			    childrenList: children || 'children'
			  };
			
			  var childrenListMap = {};
			  var nodeIds = {};
			  var tree = [];
			
			  for (let d of data) {
			    let parentId = d[config.parentId];
			    if (childrenListMap[parentId] == null) {
			      childrenListMap[parentId] = [];
			    }
			    nodeIds[d[config.id]] = d;
			    childrenListMap[parentId].push(d);
			  }
			
			  for (let d of data) {
			    let parentId = d[config.parentId];
			    if (nodeIds[parentId] == null) {
			      tree.push(d);
			    }
			  }
			
			  for (let t of tree) {
			    adaptToChildrenList(t);
			  }
			
			  function adaptToChildrenList(o) {
			    if (childrenListMap[o[config.id]] !== null) {
			      o[config.childrenList] = childrenListMap[o[config.id]];
			    }
			    if (o[config.childrenList]) {
			      for (let c of o[config.childrenList]) {
			        adaptToChildrenList(c);
			      }
			    }
			  }
			  return tree;
			}
		},
		
		
	}
</script>

<style lang="scss">
	
	.page{
		display: grid;
		grid-template-columns: 1fr 2.6fr;
		grid-template-rows:  1.2fr 1fr 14.05fr 2.1fr ;
	}
	
	

	.box-title {
		grid-column-start:1;
		grid-column-end: 3;
		grid-row-start: 1;
		grid-row-end: 2;
		background-color: #F5F5F5;
		
	}

	.top-nav{
		height: 80rpx;
		text-align: center;
		line-height: 80rpx;
		font-size: 35rpx;
		background-color: $uni-bg-color-grey;
			
		grid-column-start:1;
		grid-column-end: 3;
		grid-row-start: 2;
		grid-row-end: 3;
		
		.scroll-x{
			white-space: nowrap;
					width: 100%;
		}
	}
	.in{
		width: 120rpx;
		display: inline-block;
		// border: black solid 2px;
	}
	.in-active{
		background-color: lightgreen;
		// color: white;
	}
	
	.filter{
		
		grid-column-start:1;
		grid-column-end: 2;
		grid-row-start: 3;
		grid-row-end: 4;
		border: black solid 2px;
	}
	
	.footer{
		grid-column-start:1;
		grid-column-end: 3;
		grid-row-start: 4;
		grid-row-end: 5;
		border: black solid 2px;
	}
</style>
